<template>
  <div id="tplPage">
    <el-row class="my_row" :gutter="10" style="line-height: 30px;padding-bottom: 10px;font-size: 14px">
      <el-col :span="4" class='flex'>
        <span class="tiao_1" style='white-space:nowrap'>用户名：</span>
        <el-select v-model="form.userName" size="small" placeholder="请选择">
          <el-option
            v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" class='flex'>
        <span style='white-space:nowrap '>开始时间：</span>
        <div class="block" style="flex: 1">
          <el-date-picker v-model="form.beginDate" size="small" @change="changeDate1" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="6" class='flex'>
        <span style='white-space:nowrap'>结束时间：</span>
        <div class="block" style="flex: 1">
          <el-date-picker v-model="form.endDate" size="small" @change="changeDate2" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>

      <el-col :span="4" style="text-align: left;padding-left: 10px">
        <el-button type="success" size="small" @click="getTableData">查询</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" width="80">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column  label="编辑">
        <template  slot-scope="scope">
          <el-button type="text" size="small" @click="reviseData">修改</el-button>
          <el-button type="text" size="small" @click="deleteData">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
    <div class="block" style="padding: 15px;text-align: right">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8, 10, 13, 15]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
        options: [],
        currentPage: 4,
        centerDialogVisible: false,
        formLabelWidth: '80px',
        form: {
          pageSize: 10,
          pageNumber: 1,
          userName: '',
          beginDate: undefined,
          endDate: undefined
        }
      }
    },
    created () {
    },
    methods: {
      getTableData () {
        console.log(111)
      },
      reviseData () {
        this.centerDialogVisible = true
      },
      deleteData () {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSizeChange (val) {
        this.form.pageSize = val
        this.getTabledata ()
      },
      handleCurrentChange (val) {
        this.form.pageNumber = val
        this.getTabledata ()
      }
    }
  }
</script>

<style lang="less" scoped>
.tiao_1{
  /*border: 1px solid #ccc;*/
  /*border-radius: 30%;*/
}
</style>
